<script setup lang="ts">
import TopCpanel from "./components/TopCpanel.vue";
import LeftNav from "./components/LeftNav.vue";
import { useSetting } from "../store/manager/setting";
const settingStore = useSetting()

const leftNavigationStyle = computed(() => {
    return settingStore.setting.leftNavigationIsCollapsed ? 'collapsed-style' : 'unfolded-style';
})
</script>
<template>
    <div>
        <div class="seo">
            <title>后台管理系统</title>
        </div>
        <t-layout>
            <t-header>
                <top-cpanel></top-cpanel>
            </t-header>
            <t-layout>
                <t-aside :class="leftNavigationStyle">
                    <left-nav></left-nav>
                </t-aside>
                <t-layout>
                    <t-content>
                        <div class="page-content ">
                            <slot />
                        </div>
                    </t-content>
                    <t-footer class="w-full text-center">Copyright @ 2019-{{ new Date().getFullYear() }} 半壶水. All Rights
                        Reserved</t-footer>
                </t-layout>
            </t-layout>
        </t-layout>
    </div>
</template>
<style scoped>
.collapsed-style {
    width: 64px;
}

.unfolded-style {
    width: 232px;
}

.page-content {
    margin: 30px;
}
</style>